<%
    incluePageSecure = true; // 防止此页面被直接调用
%>
<div>
    <div class="page" id="docs_cat_add">
        <h2>添加文档分类</h2>
        <div>
            <form class="frm" method="post" action="">
                <br />父分类:
                        <select name="parent_id" class="selectOptions">
                        </select>
                <br />名称:   <input name="title" type="text" />
                <br />描述:   <input name="description" type="text" />
                <!--
                <br />图标:   <input name="icon" type="text" /> <a href="#">上传</a> <a href="#">浏览服务器</a>
                -->
                <br />      <button class="ok">确定</button>
                            <button class="cancel">关闭</button>
            </form>
        </div>

    </div>

    <div class="page" id="docs_cat_remove">
        <form class="frm" method="post" action="">
            <h3>确定删除选中的分类？</h3>
            <input name="ids" type="hidden" value="" />
            <button class="ok">确定</button>
            <button class="cancel">关闭</button>
        </form>
    </div>

    <div class="page" id="docs_cat_modify">
        <h2>修改文档分类</h2>
        <div>
            <form class="frm" method="post" action="">
                <!-- <br />父分类: <select name="parentId" class="selectOptions"></select> -->
                              <input name="id" type="hidden" />
                <br />名称:   <input name="title" type="text" />
                <br />描述:   <input name="description" type="text" />
                <!--
                <br />图标:   <input name="icon" type="text" value="$icon" /> <a href="#">上传</a> <a href="#">浏览服务器</a>
                -->
                <br />      <button class="ok">确定</button>
                            <button class="cancel">关闭</button>
            </form>
        </div>

    </div>

    <div class="page" id="docs_cat_move">
        <h2>移动文档分类</h2>
        <div>
            <form class="frm" method="post" action="execute.aspx?cmd=subsys/cat/move">
                <!--<input name="title" type="text" value="" readonly="readonly" />-->
                      把选中的分类移动到: <select name="new_parent_id" class="selectOptions"></select>
                      的位置:      <input name="width" type="text" value="1" />
                              <input name="ids" type="hidden" value="" />
                <br />      <button class="ok">确定</button>
                            <button class="cancel">关闭</button>
            </form>
        </div>

    </div>

    <div class="page" id="docs_cat_detail">
        <h2>文档分类详细</h2>
    </div>

    <div class="page" id="docs_cat_list">
        <h2>文档分类列表</h2>
    </div>
</div>

<script type="text/javascript">

(function($){
    var Category = window.Category = function( conf )
    {
        this.file = conf.file;
        this.view = conf.view;
        this.ops = conf.ops;
    }

    Category.fn = Category.prototype =
    {
        // Add
        // 职责:显示UI，绑定事件，事件函数，事件回调函数
        add_ui : function( json ){
            var page = get_popup( "add" );

            var t = this;
            var frm = page.find('.frm');
            page.find('[name="parent_id"]').append( t.get_select_options_list(json) );

            frm.attr("action", this.build_server_cmd( "add","" ) );
            frm.ajaxSubmit( 'json',function(json){
                t.add_submit_callback(json);
            });
        },

        add_request : function()
        {
            var t = this;
            $.getJSON( this.build_server_cmd( "list","&id=0" ),function(json){
                t.add_ui( json );
            });
        },

        add_submit_callback : function(json)
        {
            var dat;
            if( json.error ){
                dat = json.error;
            }else if(json.msg){
                dat = json.msg;
            }else{
                dat = "未知的错误";
            }

            App.ui.popupAlert( dat );
        },

        // Remove
        remove_ui : function(){
            var page = get_popup( "remove" );

            var t = this;
            var frm = Docs.ui.frame.find(".frm_list");    // 注意,这里找的是列表页中的Form
            frm.attr("action", this.build_server_cmd("remove","") );
            frm.ajaxSubmit('json',function(json){     //绑定事件
                t.remove_submit_callback(json,frm);
            });

            page.find(".ok").click( function(){
                page.parent().remove();
                frm.submit();
                return false;
            });
        },
        remove_submit_callback : function( json,frm )
        {
            var dat;
            if( json.error ){
                dat = json.error;
            }else if(json.msg){
                dat = json.msg;
                frm.removeChecked( "LI" ); //App.ui.content.find(".frm_list")
            }else{
                dat = "未知的错误";
            }

            App.ui.popupAlert( dat );
        },

        // Modify
        modify_request : function( id )
        {
            var t = this;
            $.getJSON( this.build_server_cmd( "details","&id="+id ),function(json){
                t.modify_ui( json );
            });
        },
        modify_ui: function( json ){
            var page = get_popup( "modify" );

            var frm = page.find('.frm');
            frm.find('input[@name="id"]').val( json.id );
            frm.find('input[@name="title"]').val( json.title );
            frm.find('input[@name="description"]').val( json.description );

            var t = this;
            frm.attr("action", this.build_server_cmd( "modify","" ) );
            frm.ajaxSubmit( 'json',function(json){
                t.modify_submit_callback( json );
            });
        },
        modify_submit_callback : function( json )
        {
            var dat;
            if( json.error ){
                dat = json.error;
            }else if(json.msg){
                dat = json.msg;
            }else{
                dat = "未知的错误";
            }

            App.ui.popupAlert( dat );
        },

        // Move
        move_request : function()
        {
            var t = this;
            $.getJSON( this.build_server_cmd( "list","&id=0" ),function(json){
                t.move_ui( json );
            });
        },
        move_ui: function( json ){
            var page = get_popup( "move" );

            var t = this;
            var frm = Docs.ui.frame.find(".frm_list");    // 注意,这里找的是列表页中的Form

            var newParent= page.find('[name="new_parent_id"]').append( t.get_select_options_list(json) );
            var newWidth = page.find('[name="width"]');

            frm.attr("action", this.build_server_cmd( "move","" ) );
            frm.ajaxSubmit('json',function(json){
                t.move_submit_callback( json );
            });

            page.find(".ok").click( function(){
                frm.find('[@name="new_parent_id"]').val( newParent.val() );
                frm.find('[@name="width"]').val( newWidth.val() );
                frm.submit();
                return false;
            });
        },
        move_submit_callback : function( json )
        {
            var dat;
            if( json.error ){
                dat = json.error;
            }else if(json.msg){
                dat = json.msg;
            }else{
                dat = "未知的错误";
            }

            App.ui.popupAlert( dat );
        },

        // Details
        get_details_request : function( id )
        {
            var t = this;
            $.getJSON( t.build_server_cmd("details","&id="+id), function(json){
                t.get_details_ui( json );
            });
        },
        get_details_ui : function( json ){
            var page = get_popup( "details" );

            page.append( '\
<div>\
    <img src="{2}" />\
    <h1 class="title">{0}</h1>\
    <p>{1}</p>\
</div>'
.format(json.title,json.description,json.icon));
        },

        // List
        get_list_request : function( query )
        {
            var t = this;

            // 读取数据
            $.getJSON( this.build_server_cmd(query.toString()), function(json){
                t.get_list_ui(json);
            });
        },
        get_list_ui: function( json )
        {
            // 读取模板,并添加到可视区域
            var page = get_page( "list" );
            Docs.ui.frameR.append( page );

            var ss = new Array();
            var endTag = new Array(); //html标签结束栈

            var curDepth = 0;
            var delText = "";

            ss.push('<form class="frm_list" method="post" action="">');
            ss.push('<ul class="catList">\n');
            ss.push('<li><span>'.concat(json[0].title,'</span>\n'));  //根节点
            for( var i=1,len=json.length; i<len; i++ )
            {
                var depth = parseInt(json[i].depth);
                //第一层包装
                if( curDepth<depth ){
                    ss.push('<ul>');
                    endTag.push('</ul>');
                    curDepth = depth;
                }
                //第二层包装
                if( curDepth==depth ){
                    ss.push('<li>');
                    endTag.push('</li>');
                }

                // 内容
                ss.push( this.get_list_item( json[i] ) );

                //结束标签
                var nextDepth;
                if( (i+1)<len ){
                    nextDepth = parseInt(json[i+1].depth);
                }else{   //i+1==len
                    nextDepth = 0;
                }
                for( var j=0,count=curDepth-nextDepth+1;j<count;j++ )
                {
                    if( nextDepth==curDepth ){
                        ss.push(endTag.pop());
                    }else{
                        ss.push(endTag.pop());
                        ss.push(endTag.pop()); // 这里为什么要出栈两次
                        curDepth--;
                    }
                }
            }
            ss.push('</li></ul>\n');
            ss.push('<input name="new_parent_id" type="hidden" />');  //用于移动分类
            ss.push('<input name="width" type="hidden" />');
            ss.push('</form>');
            page.append(ss.join("\n"));

            // 绑定事件
            var t = this;
            $(".btn_add").click(function(){ t.add_request(); return false;  });       // 绑定添加事件
            $(".btn_remove").click(function(){ t.remove_ui(); return false; });       // 绑定删除事件
            $(".btn_move").click(function(){ t.move_request();return false; });       // 绑定移动事件
            $(".btn_check").checkAll( page.find(".frm").find("input[@name='ids']") ); // 绑定 全选|全不选 事件

            $(".btn_modify").click(function(){      // 绑定修改事件
                var li = $(this);
                t.modify_request( li.siblingVal( "LI","ids" ) );
                return false;
            });
            $(".btn_details").click(function(){
                var li = $(this);
                t.get_details_request( li.siblingVal( "LI","ids" ) );
                return false;
            });

            //使用treeview控件
            page.find(".catList").treeview();
        },
        get_list_item : function( item )
        {
            return '\
<span>\
  <input name="ids" type="radio" value="{0}" />\
</span>\
<span>\
  <span><a href="{2}" title="">{1}</a></span>\
  <span>\
    <span><a href="#" class="btn_details">详细</a></span>\
    <span><a href="#" class="btn_modify">修改</a></span>\
  </span>\
</span>'
.format( item.id,item.title,Docs.fn.article.build_client_cmd("list","&catId="+item.id) );
        },

        //
        get_select_options_list : function( json )
        {
            var ss = new Array();
            for( var i=0,len=json.length;i<len;i++ ){
                ss.push( '<option value="'.concat(json[i].id,'">','-'.string(json[i].depth),' ',json[i].title,'</option>') );
            }
            return ss.join('\n');
        },
        ///////////////////////////////////////////////////////
        //Private Method///////////////////////////////////////
        ///////////////////////////////////////////////////////

        // 建立查询字符串
        // 这里有两个重载,(string,string) (string)
        build_server_cmd : function( str1,str2 )
        {
            return this.file.concat( "?",this.build_cmd(str1,str2) );
        },
        build_client_cmd : function( str1,str2 )
        {
            return "#s=".concat( App.current.query["s"],"&",this.build_cmd(str1,str2) );
        },
        build_cmd : function( str1,str2 )
        {
            if( 'undefined'!=typeof str2 ){
                return "view=".concat(this.view,"&op=",this.ops.cat[str1],str2 );
            }else{
                return str1;
            }
        }
    }

    ///////////////////////////////////////////////////////
    //Private Method///////////////////////////////////////
    ///////////////////////////////////////////////////////

    // 返回jQuery对象
    var get_page = function( handler )
    {
        return $( "#".concat("docs_cat_",handler) ).clone();  // 读取模板
    }

    // 读取模板,创建一个弹出窗口,并把弹出窗口添加到可视区域
    var get_popup = function( handler,css )
    {
        var popup = App.ui.createPopup(css).append( get_page(handler) ).addClass( "museum_popup" );

        popup.find(".cancel").click( function(){  //绑定取消按钮
            popup.parent().remove();
            return false;
        });

        return popup;
    }

})(jQuery);

</script>